<template>
  <div v-if="show" class="dialog-mask flex-center">
    <div :class="['dialog-box', dialog_show && 'dialog-box-show']">
      <div class="dialog-header">{{ title }}</div>
      <slot>
        <p class="dialog-content">{{ message }}</p>
      </slot>
      <div class="dialog-footer">
        <button class="button dialog-confirm" @click="close(handleClose)">
          確認
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
let props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '',
  },
  message: {
    type: String,
    default: '',
  },
  close: {
    type: Function,
    default: (fun) => fun(),
  },
})
console.log(props );
let dialog_show = ref(false)
setTimeout(() => {
  dialog_show.value = 1
}, 0);

const emit = defineEmits(['update:show'])

const handleClose = () => {
  emit('update:show', false)
}
</script>

<style scoped>
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog-mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.dialog-box {
  background: #fff;
  width: 300px;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0;
  transition: all 1s ease 0.1s;
}
.dialog-box-show{
  opacity: 1;
}

.dialog-header {
  padding-top: 20px;
  font-weight: bold;
  text-align: center;
}

.dialog-content {
  padding: 5px 20px 20px 20px;
  font-size: 12px;
  text-align: center;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.dialog-footer {
  display: flex;
  overflow: hidden;
  user-select: none;
  border-top: 1px solid #ebedf0;
}

.button {
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  width: 100%;
  line-height: 40px;
  background-color: #fff;
}

.button:active {
  background-color: #f2f3f5;
}

.dialog-confirm {
  color: #409eff;
}</style>
